{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "3d-marquee",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/marquee/3d-marquee.tsx",
      "content": "import { Marquee } from '@/components/ui/marquee';\r\n\r\nconst logos = [\r\n  {\r\n    name: 'Microsoft',\r\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\r\n  },\r\n  {\r\n    name: 'Apple',\r\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\r\n  },\r\n  {\r\n    name: 'Google',\r\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\r\n  },\r\n  {\r\n    name: 'Facebook',\r\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\r\n  },\r\n  {\r\n    name: 'LinkedIn',\r\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\r\n  },\r\n  {\r\n    name: 'Twitter',\r\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\r\n  },\r\n];\r\n\r\nconst Marquee3D = () => {\r\n  return (\r\n    <div className='relative flex h-full w-96 mx-auto flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border dark:bg-neutral-800 bg-neutral-50 px-20 md:shadow-xl'>\r\n      <div className='flex flex-row gap-4 perspective-near'>\r\n        <Marquee\r\n          className='h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]'\r\n          vertical\r\n          style={{\r\n            transform:\r\n              'translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)',\r\n          }}\r\n        >\r\n          {logos.map((data, idx) => (\r\n            <img\r\n              key={idx}\r\n              src={data.img}\r\n              alt={data.name}\r\n              className='mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300'\r\n            />\r\n          ))}\r\n        </Marquee>\r\n      </div>\r\n\r\n      <div className='pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-linear-to-r from-white dark:from-background'></div>\r\n      <div className='pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-linear-to-l from-white dark:from-background'></div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Marquee3D;\r\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/marquee.tsx",
      "content": "import { cn } from '@/lib/utils'\r\n\r\ninterface MarqueeProps {\r\n  className?: string\r\n  reverse?: boolean\r\n  pauseOnHover?: boolean\r\n  children?: React.ReactNode\r\n  vertical?: boolean\r\n  repeat?: number\r\n  [key: string]: any\r\n}\r\n\r\nexport function Marquee({\r\n  className,\r\n  reverse,\r\n  pauseOnHover = false,\r\n  children,\r\n  vertical = false,\r\n  repeat = 4,\r\n  ...props\r\n}: MarqueeProps) {\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={cn(\r\n        'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-(--gap)',\r\n        {\r\n          'flex-row': !vertical,\r\n          'flex-col': vertical,\r\n        },\r\n        className\r\n      )}\r\n    >\r\n      {Array(repeat)\r\n        .fill(0)\r\n        .map((_, i) => (\r\n          <div\r\n            key={i}\r\n            className={cn('flex shrink-0 justify-around gap-(--gap)', {\r\n              'animate-marquee flex-row': !vertical && !reverse,\r\n              'animate-marquee-vertical flex-col': vertical && !reverse,\r\n              'animate-marquee-reverse flex-row': !vertical && reverse,\r\n              'animate-marquee-vertical-reverse flex-col': vertical && reverse,\r\n              'group-hover:[animation-play-state:paused]': pauseOnHover,\r\n            })}\r\n          >\r\n            {children}\r\n          </div>\r\n        ))}\r\n    </div>\r\n  )\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}